<template>
	<view class="mph100 bf ">
		<view class="table_h fixed_top plr30 ft26 tac">
			<view class="table_th bd">
				<view class="table_td  bdr">押金金额</view>
				<!-- <view class="table_td  bdr">剩余金额</view> -->
				<view class="table_td  bdr">押金类型</view>
				<view class="table_td  bdr" style="width: 160upx;">订单编号</view>
				<view class="table_td  bdr">订单状态</view>
				<view class="table_td ">操作</view>
			</view>
		</view>
		<view class="table_w plr30 pt70 pb140 tac ">
			<view class="table_b bd">
				<block v-for="item in loadList" :key="item.id">
					<view class="table_tr">
						<view class="table_td ptb20 bdr">{{ item.money }}元</view>
						<!-- <view class="table_td ptb20 bdr">800元</view> -->
						<view class="table_td ptb20 bdr">{{ item.type == 1 ? '换电押金' : '租车押金' }}</view>
						<view class="table_td ptb20 bdr" style="width: 160upx;">{{ item.order_no || '--' }}</view>
						<view class="table_td ptb20 bdr">
							<text
								:class="item.rent_status == 0 ? 'warning' : item.rent_status == 1 ? 'green' : item.rent_status == 2 ? 'danger' : 'c3'">
								{{
									item.rent_status == 0 ? '进行中' : item.rent_status == 1 ? '已完成' : item.rent_status == 2 ? '退款中' : item.rent_status == 3 ? '已退款' : '--'
								}}
							</text>
						</view>
						<view class="table_td ptb20">
							<text class="ft22 primary" v-if="item.rent_status == 0"
								@click="goOrderList(item)">查看订单</text>
							<text class="plr10 primary" v-else-if="item.rent_status == 1"
								@click="routerLink({path:'/pages/user/wallet/withdrawal',query: {money: item.money,id:item.id}})">提现</text>
							<text class="plr10 primary"
								v-else>{{item.rent_status == 2?'审核中':item.rent_status == 3?'已退款': '--'}}</text>
						</view>
					</view>
				</block>
				<view class="flex_aj column ptb20" v-if="showTime && loadList.length == 0">

					<view class="c9 pt20">您还没有押金记录~</view>
				</view>
			</view>
			<uni-load-more v-if="showTime && loadList.length > 0" :status="loadMoreText" color="#999"></uni-load-more>
		</view>
		<!-- 
		<view class="fixed_bottom ptb30 plr100">
			<u-button type="primary" shape="circle" @click="routerLink({ path: '/pages/user/wallet/setAccount' })">设置提现账户</u-button>
		</view> -->
	</view>
</template>

<script>
	import loadMore from '@/mixins/loadMore'
	import {
		depositOrder,
		depositWithdraw
	} from '@/api/user.js'
	export default {
		name: 'depositDetail',
		mixins: [loadMore],
		data() {
			return {
				showTime: false
			}
		},
		methods: {
			async loadData() {
				const res = await depositOrder({
					pageNum: this.page,
					pageSize: this.limit
				})
				this.showTime = true
				this.loadList = this.page == 1 ? res.rows : [...this.loadList, ...res.rows]

				this.pageLength = res.rows.length
				this.loadMoreText = res.rows.length < this.limit ? 'noMore' : 'more'
			},
			goOrderList(item) {
				//  item.type == 1 ? '换电押金' : '租车押金'
				const activeTab = item.type == 1 ? 3 : 2
				this.routerLink({
					path: '/pages/user/myOrder/index',
					query: {
						activeTab
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.table_th {
		display: flex;
		word-wrap: break-word;
		background-color: #F4F4F5;

		.table_td {
			display: inline-block;
			width: 130upx;
			padding: 20upx 10upx;
		}
	}

	.table_w {
		.table_tr {
			display: flex;
			word-wrap: break-word;

			.table_td {
				display: inline-block;
				width: 130upx;
				padding: 20upx 10upx;
			}
		}

		.table_b {
			border-top: none;
		}

		.table_tr {
			border-bottom: 1px solid #e4e7ed;
			font-size: 24upx;
		}

		.table_tr:last-child {
			border: none;
		}
	}
</style>
